<template>
<v-card>
    <v-layout  wrap >
      <v-flex xs6 sm1 lg1 class="pr-3 pt-2 pl-3">
        <v-tooltip bottom>
        <v-btn
          class="btn-height"
          slot="activator"
          color="primary"
          round
          outline
          block
          @click="addCardType"
        >
          <v-icon  x-large>add</v-icon>
        </v-btn>
        <span>添加会员卡类型</span>
      </v-tooltip>
      </v-flex>
      <v-flex xs6 sm3 lg2 class="pr-3 pt-2" v-for="(Item,index) in cardType" :key="index" v-if="index<count">
          <v-img
            class="white--text"
            height="170px"
            :src="Item.image"
            @click="addCard(Item)"
          >
            <v-container fill-height fluid>
              <v-layout fill-height>
                <v-flex xs12 align-end flexbox>
                  <v-badge right color="green">
                    <span slot="badge" >{{Item.memberAmount}}</span>
                    <span class="headline">{{Item.name}}</span>
                    </v-badge>
                </v-flex>
              </v-layout>
            </v-container>
          </v-img>
      </v-flex>
      <v-flex xs6 sm1 lg1 class="pr-3 pt-2" v-if="cardType.length > count">
        <v-tooltip bottom>
        <v-btn
          class="btn-height"
          slot="activator"
          color="primary"
          block
          round
          outline
          @click="lookMore"
        >
          <v-icon  x-large>more_horiz</v-icon>
        </v-btn>
        <span>更多</span>
      </v-tooltip>
      </v-flex>
    </v-layout>
    <v-divider class="divider"></v-divider>
    <Query-condition :startDate = "startDate" :endDate = "endDate" :search = "search"></Query-condition>
    <Card-list :tableData = "users"></Card-list>
    <AddCardType :dialogCardType="dialogCardType" v-show="false"></AddCardType>
    <LookMore :cardType = "cardType" :count = "count"  :dialogLookMore = "dialogLookMore" v-show="false"></LookMore>
    <AddCard :dialogAddCard="dialogAddCard" :item="item" v-show="false"></AddCard>
</v-card>
</template>

<script>
import AddCardType from "./AddCardType.vue"
import LookMore from "./LookMore.vue"
import QueryCondition from "./QueryCondition.vue"
import CardList from "@/components/CardList"
import AddCard from "@/components/AddCard"
import { Items as Users } from "@/api/user";
export default{
  data(){
    return{
      dialogCardType:false,
      dialogLookMore:false,
      dialogAddCard:false,
      startDate: null,
      endDate: null,
      search: "",
      cardType:[
        {name:"钻石卡",memberAmount:5,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"白金卡",memberAmount:7,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"黑铁卡",memberAmount:9,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"青铜卡",memberAmount:10,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"}
      ],
      count:5,
      users:Users,
      item:""
    }
  },
  components: {
    AddCardType,
    LookMore,
    QueryCondition,
    CardList,
    AddCard
  },
  mounted () {
    //监控浏览器大小
    this.onResize();
    window.addEventListener("resize", this.onResize, { passive: true });
    // 订阅消息(deleteTodo)
    //关闭添加会员卡类型
    PubSub.subscribe('cancel', (msg, index) => {
      this.addCardType()
    })
    //关闭查看更多
    PubSub.subscribe('close', (msg, index) => {
      this.lookMore()
    })
    //关闭办卡
    PubSub.subscribe('cancelAddcard', (msg, index) => {
     this.dialogAddCard  = !this.dialogAddCard
    })
    //查看更多中打开办卡
    PubSub.subscribe('addCard', (msg, item) => {
      this.addCard(item)
    })
  },
  beforeDestroy() {
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", this.onResize, { passive: true });
    }
  },
  methods: {
    addCardType(){
      this.dialogCardType = !this.dialogCardType
    },
    lookMore(){
      this.dialogLookMore = !this.dialogLookMore
    },
    onResize() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs': return this.count = 2
        case 'sm': return this.count = 3
        case 'md': return this.count = 3
        case 'lg': return this.count = 4
        case 'xl': return this.count = 5
      }
    },
    addCard(item){
      debugger
      this.item = item
      console.log(this.item)
      this.dialogAddCard  = !this.dialogAddCard
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn-height {
  height: 100%;
}
.divider {
  margin:16px;
}
</style>
